<template>
	<view class="content" :style="{paddingTop: titleTop + 'px'}">
		<view class="mainHeader" :style="{minHeight: statusBarHeight+'px'}">
			<headNav>
				<template #titleBox>
					<image src="" class="shareIcon" mode="widthFix"></image>
				</template>
			</headNav>
		</view>
		<view class="contentWrap" :style="{minHeight:'calc(100vh - '+(titleTop + statusBarHeight )+'px)'}">

			<view class="swiperWrap">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration" @change="swiperChange">
					<swiper-item v-for="(item,index) in list" :key="index">
						<view class="swiper-item">
							<image :src="item.previewview|completeUrl" mode="aspectFill" class="swiperImg"></image>

						</view>
					</swiper-item>
				</swiper>
				<view class="dots">
					<view class="current">{{current}}</view>
					<view class="all">
						{{list.length}}
					</view>
				</view>
			</view>
			<view class="infoWrap">
				<view class="infotop">
					<view class="title">
						{{list[0].name}}
					</view>
					<view class="lickNum">
						4.4w+ 喜欢
					</view>
				</view>
				<view class="infoPrice">
					<view class="priceTxt ">
						<text class="unit">￥</text>
						{{list[0].direct_price}}
					</view>
					<view class="forwardBox">
						<view class="lable">
							转发价
						</view>
						<view class="priceTxt">
							<text class="unit">￥</text>
							{{list[0].forward_price}}
						</view>
					</view>
				</view>
			</view>
			<scroll-view scroll-x="true" class="nav-scroll">
				<!-- 导航项容器 -->
				<view class="nav-item" v-for="(item, index) in directList" :key="index" @click="itemClike(item)">
					<cardBag :cardData="item" :urlKey="'thumbnail'">
						<!-- <template #infoMore>
							<view class="price">
								<text class="unit">￥</text>
								200
							</view>
						</template> -->
					</cardBag>
				</view>
			</scroll-view>
			<view class="cardWrap">
				<view class="title">
					赠图
				</view>
				<scroll-view scroll-x="true" class="nav-scroll">
					<!-- 导航项容器 -->
					<view class="nav-item" v-for="(item, index) in bonusList" :key="index">
						<cardBag :cardData="item" :cardWidth='146' :cardHeight='146' :tagWidth='50'
							:urlKey="'thumbnail'">
						</cardBag>
					</view>
				</scroll-view>
			</view>
			<view class="shopInfo">
				<view class="shopHeader">
					<image :src="shopsDetail.avatar" class="shopImg" mode="aspectFill" lazy-load></image>
					<view class="shuopInfoTxt">
						<view class="title">
							<view class="leftLay">

								<view class="titleLeft">

									<view class="txt">
										{{shopsDetail.name||""}}
									</view>
									<view class="hotNum">
										<image src="/static/index/hotIcon2.png" class='hotIcon' mode=""></image>
										{{shopsDetail.hot_score||0}}
									</view>
									<view class="follow" @click="shopsFollow">
										<uni-icons type="plusempty" color="#FF7994" size="8"></uni-icons>
										{{is_followed==0?'未关注':'已关注'}}
									</view>
								</view>


								<view class="group">
									<image src="/static/index/groupIcon.png" class="groupIcon" mode="widthFix"></image>
									<text class="lable">店铺导航群：</text>
									<view class="groupName" v-if="shopsDetail.customer_service.length>0">
										<scroll-text :textList="shopsDetail.customer_service" :showCount="1" :speed="2"
											:itemHeight='32' @copy="onCopy"></scroll-text>
									</view>
								</view>

							</view>

						</view>
					</view>
				</view>
				<!-- <view class="shopText">
					涵盖动漫角色、卡通人物、萌宠、动物、人物、缩小版场景、日本特色物品、食物等各种题材，满足了不同人群的喜好
				</view> -->

				<view class="bnt" @click="linkUrl(`/pages/my/claimBenefits`)">
					参与转浮
					<uni-icons type="right" color="#4EACAA" size="10"></uni-icons>
				</view>
			</view>
		</view>

		<view class="playWrap">
			<!-- <view class="infoBox">
				<view class="infoTxt">
					<view class="value">
						<view class="priceTxt ">
							<text class="unit">￥</text>
							200起
						</view>
					</view>
				</view>
			</view> -->
			<view class="bnt" @click="linkUrl(`/pages/index/selfPurchased?shopId=${shopId}&machineId=${machineId}`)">
				<image src="/static/bntBg.png" class="bntBg" mode="aspectFit"></image>
				<view class="txt">
					立即购买
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				current: 1,
				list: [{
					url: 'https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg',
					id: 1
				}, {
					url: 'https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg',
					id: 2
				}, {
					url: 'https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg',
					id: 3
				}, {
					url: 'https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg',
					id: 4
				}, ],
				list2: [{
					level: 0,
					src: "https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg",
					name: '大话西游',
					action: false,
					status: 1,
				}, {
					level: 1,
					src: "https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg",
					name: '大话西游之月光宝',
					action: false,
					status: 2,
				}, {
					level: 2,
					src: "https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg",
					name: '大话西游之月光宝',
					action: true,
					status: 3,
				}, {
					level: 3,
					src: "https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg",
					name: '大话西游之月光宝',
					action: false,
					status: 4,
				}, ],
				machine: {},
				shopsDetail: {},
				directList: [],
				bonusList: [],
				shopId: '',
				machineId: '',
				is_followed: 0,
			}
		},
		onLoad(e) {
			// 移除用户选择的缓存数据
			/* uni.removeStorageSync('userSelects');
			uni.removeStorageSync('userSelectsIds'); */
			this.shopId = e.shopId;
			this.machineId = e.machineId;
			this.machinesDetailFn();
			this.getShopsDetailFn();
			// this.Toggle2() 
		},
		methods: {
			linkUrl(url, type = 0) {
				if (type == 0) {

					uni.navigateTo({
						url
					})
				} else {

					uni.reLaunch({
						url
					})
				}
			},
			swiperChange(e) {
				console.log(e, "sw");
				this.current = e.detail.current + 1
			},
			// 通过ID获取机台详情
			machinesDetailFn() {
				this.$http('/v1/machines/detail/' + this.machineId).then(res => {
					console.log(res, "获取机台详情");
					if (res.code == 0) {
						const data = res.data;
						this.machine = data.machine;
						// this.shopsDetail = data.shop || 0;
						// this.list=JSON.parse(this.machine.showlist);
						// 直购图
						this.directList = data.all_images.filter(item => {
							return item.cat_type == 1;
						})
						// 大图展示
						this.list = [this.directList[0]];
						// 增图
						this.bonusList = data.all_images.filter(item => {
							return item.cat_type == 2 || item.cat_type == 3;
						})
						// this.user_share = data.user_share;

					} else {
						this.$showToast(res.msg)
					}
				})
			},
			itemClike(item) {
				this.list = [item];
			},
			// 通过ID获取店铺详情
			getShopsDetailFn() {
				this.$http('/v1/shops/detail/' + this.shopId).then(res => {
					console.log(res, "获取账号列表");
					if (res.code == 0) {
						this.shopsDetail = res.data.shop;
						this.is_followed = res.data.is_followed;
					} else {
						this.$showToast(res.msg)
					}
				})
			},
			// 关注
			shopsFollow() {
				this.$http('/v1/shops/follow', {
					"shop_id": Number(this.shopId),
					"follow": this.is_followed == 1 ? 0 : 1, //// 0=取消关注, 1=关注
				}, 'POST').then(res => {
					console.log(res);
					if (res.code == 0) {
						this.getShopsDetailFn()
					} else {}
					this.$showToast(res.msg)
				})
			},
		}
	}
</script>
<style>
	page {
		background-color: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	.content {
		background-color: #FFFFFF;

		.mainHeader {
			@include flexLayout;

			.shareIcon {
				@include setwh(50upx, 50upx);
			}
		}

		.contentWrap {
			background: #F9F9F9;

		}

		.swiperWrap {
			width: 100%;
			position: relative;

			.swiper {
				height: 750upx;

				.swiper-item {
					display: block;
					height: 100%;
					position: relative;

					.swiperImg {
						width: 100%;
						height: 100%;
						background: #F3F3F3;
					}
				}
			}


			.dots {
				@include flexLayout;
				width: 116rpx;
				height: 40rpx;
				border-radius: 21rpx;
				backdrop-filter: blur(10px);
				overflow: hidden;
				position: absolute;
				right: 60upx;
				bottom: 36upx;

				view {
					flex: 1 1;
					font-family: SourceHanSansSC;
					font-weight: 500;
					font-size: 22rpx;
					color: #FFFFFF;
					line-height: 40upx;
					text-align: center;
				}

				.current {
					background: rgba(104, 104, 104, 0.35);
				}

				.all {
					background: rgba(216, 216, 216, 0.35);
				}
			}
		}

		.infoWrap {
			width: 698rpx;
			height: 188rpx;
			background: #FFFFFF;
			border-radius: 22rpx;
			margin: 24upx auto 18upx;
			padding: 18upx 26upx 32upx 34upx;

			.infotop {
				@include flexLayout(flex-end, space-between);
				margin-bottom: 38upx;

				.title {
					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
					line-height: 48rpx;
				}

				.lickNum {
					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: 500;
					font-size: 22rpx;
					color: #979797;
					line-height: 32rpx;
				}
			}

			.infoPrice {
				@include flexLayout(center);

				.priceTxt {
					@include flexLayout(center);
					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: bold;
					font-size: 38rpx;
					color: #FF7994;

					// line-height: 32rpx;
					.unit {
						font-size: 32rpx;
						// line-height: 1;
					}
				}

				.forwardBox {
					@include flexLayout(center);
					min-width: 212rpx;
					height: 52rpx;
					background: #FFDEEA;
					border-radius: 28rpx;
					margin-left: 20upx;
					padding-right: 14upx;

					.lable {
						width: 90rpx;
						height: 52rpx;
						background: #FD8EB7;
						border-radius: 27rpx 0rpx 27rpx 27rpx;
						text-align: center;
						line-height: 52upx;
						font-weight: bold;
						font-size: 20rpx;
						color: #FFFFFF;
						margin-right: 16upx;
					}

					.priceTxt {
						font-size: 34rpx;
						line-height: 50rpx;
					}
				}
			}
		}

		.nav-scroll {
			white-space: nowrap;
			/* 防止子元素换行 */
			overflow: hidden;
			/* 隐藏超出部分 */
			-webkit-appearance: none;
			margin-left: 28upx;

			.nav-item {
				margin-right: 26upx;
				display: inline-block;
				margin-bottom: 16upx;

				.price {
					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: bold;
					font-size: 22rpx;
					color: #FF7994;
					line-height: 32rpx;
					text-align: right;
					padding-right: 6upx;

					.unit {
						font-size: 20rpx;
					}
				}
			}
		}

		.cardWrap {
			width: 750rpx;
			// height: 342rpx;
			background: linear-gradient(180deg, #E0FFFC 0%, #FFFFFF 100%);
			border-radius: 22rpx;
			padding-left: 30upx;
			padding-top: 20upx;
			padding-bottom: 38upx;
			margin-top: 26upx;
			margin-bottom: 26upx;

			.title {
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
				margin-left: 50upx;
				margin-bottom: 48upx;
				line-height: 40rpx;
			}

			::v-deep .main .title {
				text-align: center;
				padding-top: 12upx;
			}
		}

		.shopInfo {
			width: 698rpx;
			// min-height: 344rpx;
			background: #FFFFFF;
			border-radius: 22rpx;
			margin: 24upx auto 0;
			padding: 30upx 60upx 40upx 32upx;

			.shopHeader {
				@include flexLayout(center);

				.shopImg {
					@include setwh(114upx, 114upx);
					background-color: #F3F3F3;
					margin-right: 26upx;
					border-radius: 100%;
				}

				.shuopInfoTxt {
					width: calc(100% - 140upx);

					.title {
						// @include flexLayout(center, space-between);
.leftLay{
	// @include flexLayout(center, space-between);
}
						.titleLeft {
							@include flexLayout(center, flex-start);
							width: 100%;//calc(100% - 140upx);
						}

						.txt {
							font-family: SourceHanSansSC, SourceHanSansSC;
							font-weight: bold;
							font-size: 32rpx;
							color: #454545;
							line-height: 46rpx;
							margin-right: 12upx;
							// width: calc(100% - 50upx);
						}

						.follow {
							width: 84rpx;
							height: 38rpx;
							border-radius: 19rpx;
							border: 2rpx solid #FF7994;
							@include flexLayout(center, center);
							font-family: SourceHanSansSC, SourceHanSansSC;
							font-weight: bold;
							font-size: 16rpx;
							color: #FF7994;
							line-height: 38rpx;
				margin-left: auto;
						}
					}

					.hotNum {
						@include flexLayout(center, center);
						font-family: AlimamaFangYuanTiVF, AlimamaFangYuanTiVF;
						font-weight: bold;
						font-size: 14rpx;
						color: #FF8181;
						line-height: 24rpx;

						.hotIcon {
							@include setwh(32rpx, 28rpx);
							margin-right: 10upx;
						}
					}
				}

			}

			.shopText {
				margin: 20upx auto 38upx;
				width: 574rpx;
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 500;
				font-size: 22rpx;
				color: #555555;
				line-height: 32rpx;
			}

			.group {
				@include flexLayout(center);
				margin-top: 20upx;

				.groupIcon {
					@include setwh(36rpx, 26rpx);
				}

				.lable {
					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: 500;
					font-size: 20rpx;
					color: #747474;
					line-height: 30rpx;
					padding: 0 14upx 0 8upx;
				}

				::v-deep .groupName {
					min-width: 150upx;

					.text-content {

						font-family: SourceHanSansSC, SourceHanSansSC;
						font-weight: bold;
						font-size: 22rpx;
						color: #676767;
						// line-height: 32rpx;
					}
				}
			}

			.bnt {
				@include flexLayout(center, center);
				margin-left: auto;
				width: 134rpx;
				height: 38rpx;
				background: #A8E4E1;
				border-radius: 20rpx;
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: bold;
				font-size: 17rpx;
				color: #4EACAA;
				line-height: 38rpx;
			}
		}
	}

	.playWrap {
		// position: fixed;
		// left: 0;
		// right: 0;
		// bottom: 0;
		// width: 750rpx;
		// height: 187rpx;
		// background: #FFFFFF;
		// box-shadow: 0rpx -4rpx 29rpx 4rpx rgba(210, 210, 210, 0.5);
		// border-radius: 29rpx 29rpx 0rpx 0rpx;
		// @include flexLayout(center, space-between);
		// padding: 24upx 52upx 106upx 76upx;
		// z-index: 9;
// 

		.infoBox {
			.infoTxt {
				.value {

					.priceTxt {
						font-family: SourceHanSansSC, SourceHanSansSC;
						font-weight: bold;
						font-size: 38rpx;
						color: #FF7994;
						line-height: 56rpx;

						.unit {
							font-size: 30rpx;
						}
					}
				}
			}
		}

		.bnt { 
			// width: 182rpx;
			// height: 56rpx;
			// background: #FF7994;
			margin-top: 34upx;
			padding-bottom: 90upx;
			border-radius: 32rpx;
			text-align: center;
			position: relative;
			.txt{
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 500;
				font-size: 32rpx;
				color: #9E4C4C;
				position: relative;
				line-height: 136rpx;
			}
			.bntBg {
				position: absolute;
				top: 0;
				left: 50%;
				right: 0;
				// z-index: -1;
				@include setwh(720rpx, 136rpx);
				transform: translateX(-50%);
			}
		}
	}
</style>